<template>
  <div class="otherShop">
    <a href="#/" v-if="!showSetting" class="ico-home"></a>
    <div class="photobanner">
      <span class="setting" v-if="showSetting" v-on:click="gotoAddress('/me/people')"><img class="setup" src="../../assets/images/me-setup.png"></span>
      <div class="img"><img class="photo" :src="'http://api.piver.cn/image/users/'+id+'.jpg?v='+Math.random()"></div>

      <div class="left1 content-l on" v-if="!follow" @click="followPeople()">+ 关注</div>
      <div class="left1 content-l color " v-if="follow" @click="unfollowPeople()">√已关注</div>
      <div class="right content-r">@私信她</div>

      <div class="name">{{people.firstname}}</div>
      <div class="total clearFix">
        <div class="fl left">
          <p>{{people.followers}}</p>
          <span>关注</span>
        </div>
        <div class="fl">
          <p>{{people.fans}}</p>
          <span>粉丝</span>
        </div>
      </div>
    </div>

    <div class="me-box">
      <ul class="list">
        <li @click = "gotoAddress('/otherIndex?id='+id+'&v='+Math.random())">
          主页
        </li>
        <li class="on" @click = "gotoAddress('/otherShop?id='+id+'&v='+Math.random())">
          商品
        </li>
        <!--<li @click = "gotoAddress('/me/otherArticle')">发表</li>-->
      </ul>
      <div class="content">

        <div class="have-shop" v-if="haveshop">
          <div class="list-box">
            <div class="li clearfix" v-for="(it,index) in products" >
              <div class="fc-div clearfix" >
                <a v-on:click="gotoAddress('/shop/details/'+it.product_id)">
                  <div class="left img">
                    <img :src="it.product.image" alt="">
                  </div>
                  <div class="left fonttext">
                    <div class="a-tt" v-html="it.product.name"></div>
                    <div class="a-pr">￥{{it.product.price}}元</div>
                  </div>
                </a>
              </div>
              <div class="fr-div">
                x1
              </div>
            </div>
          </div>

        </div>
        <div class="no-have-shop" v-if="!haveshop">
          <div class="no-box">
            <div>用户还没有寄卖的商品！</div>

          </div>

        </div>


      </div>
    </div>




  </div>
</template>

<script>
  import {Toast} from 'mint-ui'

  export default {
    name: 'OtherShop',
    data () {
      return {
        id:'',
        people:{},
        address:{},
        follow:false,
        haveshop:true,
        products:[],
        token:sessionStorage.user && JSON.parse(sessionStorage.user).token || '',

        showSetting:false

      }
    },
    methods: {
      gotoAddress(path){
        this.$router.push(path)
      },

      initData:function(){
        this.id= this.$route.query.id;
//         console.log(this.id);

        var  ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        ajaxData.uid = this.id;

        var _this=this;
        $.ajax({
          type:'get',
          url: RouteMap.otherPeople,
          data:ajaxData,
          success:function(res){
            if(res.code == 200){

              _this.people = res.data;

              if(res.data.isFolloer){
                _this.follow = true;
              }else{
                _this.follow = false;

              }

            }
            else{
              //Toast(res.msg)
            }
          }
        })
      },

      followPeople:function(){
        var _this = this;
        if (_this.token == '') {
//          _this.$router.push('/login');
          _this.$router.push({path:'/login',query: {redirect: location.hash.replace('#','')}});
          return;
        }

        var  ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        ajaxData.follow_customer_id = this.id;

        $.ajax({
          type:'post',
          url: RouteMap.followPeople,
          data:ajaxData,
          success:function(res){
            if(res.code == 200){

              //Toast(res.msg);
              _this.follow = true;
//               console.log(res.data)
            }
            else{
              //Toast(res.msg)
            }
          }
        })

      },

      unfollowPeople:function(){

        var  ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        ajaxData.unfollow_customer_id = this.id;

        var _this=this;
        $.ajax({
          type:'post',
          url: RouteMap.unfollowPeople,
          data:ajaxData,
          success:function(res){
            if(res.code == 200){

              //Toast(res.msg);
              _this.follow = false;
//               console.log(res.data)
            }
            else{
              //Toast(res.msg)
            }
          }
        })
      },

      initShop:function(){
        this.id= this.$route.query.id;
//         console.log(this.id);

        var  ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        ajaxData.uid = this.id;
        ajaxData.pn = 1;

        var _this=this;
        $.ajax({
          type:'post',
          url: RouteMap.otherPeopleShop,
          data:ajaxData,
          success:function(res){
            if(res.code == 200){

              _this.products = res.data.list;

//              console.log(res.data)


            }
            else{
              //Toast(res.msg)
            }
          }
        })

      }



    },
    mounted:function() {
      this.initData();
      this.initShop();
      if(this.$route.query.id == (sessionStorage.user && JSON.parse(sessionStorage.user).customer_id)){

        this.showSetting = true;
      }
    }



  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .photobanner{ text-align: center; padding-top:1.92rem; padding-bottom: 1.6rem; position: relative; background: #fff;}
  .img{padding-bottom:.8rem;}
  .photo{ border-radius:50%; width: 3.84rem; height:3.84rem;}
  .name{font-size:.683rem;color:#000;padding-bottom:.72rem; font-weight:bold;}
  .total{   margin-left: 6.2rem;width:4rem;}
  .total p{color:#707070; font-size:.725rem;}
  .total span{color:#707070; font-size:.427rem; font-weight:bold;}
  .total .left{padding-right:1.36rem;}
  .photobanner .left1{position: absolute; top:3.5rem; left:2.80rem; }

  .photobanner .content-l{ border:1px solid #b01f24 ; font-size:.43rem; padding:.15rem 0;
    width:2.8rem; border-radius:5px; color:#b01f24 ;}
  .photobanner .content-r{ border:1px solid #b01f24 ; font-size:.43rem; padding:.15rem 0;
    width:2.8rem; border-radius:5px; color:#b01f24 ;}
  .photobanner .color{background:#b01f24 ;color:#fff;}
  .photobanner .right{position: absolute; top:3.5rem; right:2.80rem;}

  .setting{ position: absolute; right: .64rem; top: 1.49rem;}
  .setup{width:.756rem;height:.756rem;}


  .me-box{
    background:#fff;
  }
  .list{
    display:flex;
    justify-content:space-around;
    align-items:center;
    padding-bottom:1.064rem;
    color:#b0242a;
  }
  .list li {
    padding-top:.21rem;

  }
  .list .on {

    border-top:0.17rem solid #ae2124;

  }

  .content {
    padding:0 .604rem;


  }
  .content .list2{
    border-top: 1px solid #ccc;
    padding-bottom:1.19rem;
  }

  .content p{
    line-height:1.87rem;
    border-bottom:1px solid #ccc;
    padding:0 .149rem;
    font-size:.51rem;
    color:#000;

  }
  .content p span{float:left;}
  .content p b{float:right;}
  .content p.introduce{
    height:6.28rem;
  }


  .list-box{

  }
  .list-box .li{
    padding: .5rem;
    font-size: .6rem;
    border-bottom: 1px solid #c2c2c2;
    display:-webkit-box;
    justify-content: space-between;
    color: #707070;
  }
  .list-box .li a{
    color: #707070;
  }
  .list-box .shixiao{
    color: #c2c2c2;
  }
  .list-box .shixiao a{
    color: #c2c2c2;
  }
  .list-box .li .fl-div{
    width: 1.5rem;
  }
  .fl-div span{
    display: inline-block;
    margin-top: 1.4rem;
  }
  .list-box .li .fc-div{
    width: 11rem;
  }
  .list-box .li .fr-div{
    width: 2rem;
    text-align: right;
    padding-top: 1.5rem;

  }
  .list-box .li .left img{ width:3rem }
  .fc-div .img{
    width: 3rem;
    height:3.75rem;
    position:relative;
  }
  .fc-div .img img{
    max-width: 100%;
    max-height:100%;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
  .fc-div .fonttext{
    width: 7.5rem;
    margin-left: .5rem;
    margin-top: .5rem;
    font-size: .6rem;
    color: #707070;
  }
  .fc-div .fonttext .a-pr{

padding-top: .45rem;  }
  .overdue{
    background: #f5f5f5;
    border-radius: .2rem;
    padding: .1rem .1rem;
    font-size: .5rem;
  }
  .clear-box{
    text-align: center;
    padding-top: .5rem;
  }
  .clear-box .clear{
    display: inline-block;
    background: #f5f5f5;
    color: #707070;
    padding: .2rem .8rem;
    border-radius: .4rem;
  }

</style>
